<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-16 19:35:42
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-05-18 17:16:06
 * @FilePath: \橙券\vue-project\src\views\newsDetail\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import GlobalNavbar from '@/components/GlobalNavbar.vue';
import { ref } from 'vue';
//获取文章id
import { useRoute } from 'vue-router';
const route = useRoute()
const id = route.params.id

//通过id获取文章
import { getNewsDetail } from '@/api/news';
const detail = ref({})
const getDetail = async () => {
    const res = await getNewsDetail(id)
    detail.value = res.data.data
}
getDetail()
</script>

<template>
    <div>
        <GlobalNavbar title="橙券新闻动态" textOne="新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！" img="toppic03.png"
            height="200px" />
        <div class="detail">
            <div class="detail-head">
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ detail.title }}</el-breadcrumb-item>
                </el-breadcrumb>
                <h3 class="title">{{ detail.title }}</h3>
                <p class="date">{{ detail.createAt }}</p>
            </div>
            <div class="detail-main">
                <main v-html="detail.body"></main>
            </div>
        </div>

    </div>
</template>


<style lang="scss" scoped>
.detail {
    margin: 0 auto;
    padding-top: 60px;
    width: 1160px;

    .detail-head {
        text-align: center;
        padding-bottom: 40px;
        border-bottom: 1px solid #e5e5e5;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 3px;
            background-color: #ff7200;

        }

        .title {
            padding-top: 65px;
            padding-bottom: 25px;
            font-size: 30px;
            color: #333333;
        }

        .date {
            font-size: 16px;
            color: #666666;
            letter-spacing: 1px;
        }
    }

    .detail-main {
        padding: 50px 194px 100px;

        p {
            font-size: 16px;
            color: #666666;
            text-indent: 2em;
        }
    }
}
</style>